<template>
  <ul class="_m-2 d-flex justify-content-center flex-wrap-wrap">
    <router-link
      :to="'/books/detail/' + books.id"
      tag="li"
      class="flex-1 p-2"
      v-for="books in data"
      :key="books.id"
    >
      <div class="book-cover">
        <template v-if="!es">
          <img v-lazy="books.booksCover" class="book-cover-img" />
        </template>
        <template v-else>
          <img v-lazy="books.booksVo.booksCover" class="book-cover-img" />
        </template>
      </div>
      <div class="book-info">
        <h3>{{books.booksName}}</h3>
        <p>{{books.author}}</p>
      </div>
    </router-link>
  </ul>
</template>

<script>
export default {
  name: "EightGrid",
  props: {
    data: Array,
    es: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

ul {
  li {
    max-width: 20vw;

    .book-cover {
      position: relative;

      .book-cover-img {
        width: 100%;
        height: 100%;
      }
    }

    h3, p {
      font-size: 16px;
      max-width: 20vw;
      ellipsis();
      line-height: 24px;
      color: #666;
    }

    p {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>
